<?php /*a:2:{s:37:"D:\www\wy_shop\app\view\mq\index.html";i:1710755644;s:40:"D:\www\wy_shop\app\view\common\head.html";i:1702389678;}*/ ?>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/jquery/jquery-1.12.4.min.js"></script>    
    <link href="/static/bst5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/bst5.3.2/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="/static/bst-icons/font/bootstrap-icons.css">
    <script src="/static/layer/layer/layer.js"></script>
    <link rel="stylesheet" href="/static/css/my.css">    
</head>

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<head>
<title>管理后台登录</title>

<style type="text/css">
    html{height: 100%;}
    #top{background: #f7f7f7;border-bottom:1px solid #ccc;font-size: 1.3rem;}
    #top div{color: ;}
    label{color: #00f;}
    #bottom{text-align: center;}

</style>
</head>
<body style="background-imagex: linear-gradient(#f90, #fff);max-width: 600px;margin:auto;">
    <div class="container p-5 my-2" style="margin: 0;auto;max-width: 600px;"  >

    <div id="top" class="text-center row text-primary" >
      <div class="col-12">MQTT Cient</div>
    </div>    

    <div>MQTT Cient test.
        <button id="connect">connect</button>
        <button id="disconnect">disconnect</button>
    </div>

    <div id="mqtt_text">
        
    </div>

    <input type="text" id="mqtt_msg" value="" placeholder="MQTT send" />
    <button id="mqtt_send">发布</button>

    <div id="bottom">
        版权所有：xjpa666.cn
            <a href="https://beian.miit.gov.cn/">浙ICP备2023021152号-1</a>  
        技术支持：浙江万溢信息科技有限公司
    </div>

    </div>

<script type="text/javascript">
    $(document).ready(function(){
        //verifyReload();
        
    //MQTT connection information   
     
    const clientId = 'emqx_test_' + Math.random().toString(16).substring(2, 8);
    const username = 'admin';
    const password = 'admin';
    const broker    ='wss://ie58d81e.ala.cn-hangzhou.emqxsl.cn:8084/mqtt';
    var client=null;
    const topic = '/WebSocket/mqtt';
    const qos = 0;

    //const client = mqtt.connect('wss://broker.emqx.io:8083/mqtt', {
    client = mqtt.connect(broker, {clientId,username,password,});

    //订阅
    client.subscribe(topic, { qos }, (error) => {
      if (error) {
        console.log('subscribe error:', error)
        return
      }
      console.log(`Subscribe to topic '${topic}'`)
    })


    $("#connect").on('click',function(){
        client = mqtt.connect(broker, {clientId,username,password,});
        client.subscribe(topic, { qos }, (error) => {
          if (error) {
            console.log('subscribe error:', error)
            return
          }
          console.log(`Subscribe to topic '${topic}'`)
        })
    })



    // 设置发布的主题、消息及 QoS
    var payload = 'WebSocket mqtt test';

    // client.publish(topic, payload, { qos }, (error) => {
    //   if (error) {
    //     console.error(error)
    //   }
    // });

    $("#mqtt_send").on('click',function(){
        client.publish(topic,$("#mqtt_msg").val(),{qos},function(error){
            if(error) {
                alert(error);
            }
        })
    })


    //接收消息
    client.on('message', (topic, payload) => {
      str='Received Message: ' + payload.toString() + '\nOn topic: ' + topic;
      console.log(str);

      $("#mqtt_text").after("<div>"+str+"</div>");

    });

    //disconnect

    $("#disconnect").on('click',function(){

        if (client.connected) {
          try {
            client.end(false, () => {
              console.log('disconnected successfully')
            })
          } catch (error) {
            console.log('disconnect error:', error)
          }
        }

    })



    })


    function verifyReload(){
        validate = document.getElementById('validate');
        validate.src = "";
        validate.src = "/index.php/login/verify/temp/"+new Date().getTime().toString(36);
    }

</script>


</body>
</html>
